<template>
  <div ref="pie" :style="{ width: '40vw', height: '40vh' }"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted, nextTick } from "vue";
import { ageInComputer } from "../api/function";

const pie = ref<HTMLElement | null>(null);
let seriesData = ref<any[]>([]);

const getPieData = async () => {
  const res = await ageInComputer();
  console.log("饼图数据", res.data);
  seriesData.value = res.data.map((item: any) => ({
    value: item.count,
    name: item.age,
  }));
  console.log("seriesData数组", seriesData.value);
};

onMounted(() => {
  nextTick(async () => {
    await getPieData();
    if (pie.value) {
      const myChart = echarts.init(pie.value);
      window.addEventListener("resize", function () {
        myChart?.resize();
      });
      myChart.setOption({
        title: {
          text: "计算机岗位从业者年龄分布数量图（单位：万人）",
          left: "6%",
          textStyle: { fontSize: "13px", color: "#b8b4b4" },
        },
        tooltip: {
          trigger: "item",
           // 自定义提示框内容格式
           formatter: function (params: any) {
                console.log(params);
                
                return `${params.seriesName}<br/>${params.marker}${params.name}：${params.value} 万人`;
            },
        },
        legend: {
          orient: "vertical",
          top: "60%",
          left: "10%",
          textStyle: { color: "#b8b4b4" },
        },
        series: [
          {
            name: "详细信息",
            type: "pie",
            radius: "50%",
            data: seriesData.value,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    } else {
      console.log("pie is null");
    }
  });
});
</script>
